{include file='common/head'}
<script>
    document.title = "首页 | {:config('system.base.title')} "
</script>
<style>
    .sign {
        background-color: #fff;
        padding: 10px;
        margin-top: 10px;
    }

    .sign .btn-box {
        margin: 10px 0;
        padding: 10px;
    }

    .sign-active {
        background-color: #fff;
    }

    .sign-active .layui-tab-content {
        padding: 10px;
    }

    .sign-active .avator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 3px 8px #eee;
        border: 1px solid #eee;
    }

    .layui-carousel img {
        width: 100%;
        height: 100%;
    }

    #sign-activ .list:not(:last-child) {
        border-bottom: 1px solid #eee;
        margin-bottom: 5px;
    }
</style>
<div class="layout clearfix">
    <div class="left-ctn">
        
        {if $data.title && $Request.get.tag}
        <span class="layui-breadcrumb">
            <a href="{:url('/index/index/index')}">首页</a>
            <a><cite>{$data.title}</cite></a>
        </span>
        {else /}
        {if config('system.switch.carouselSw')}
        <div class="layui-carousel" id="ID-carousel-demo-image">
            <div carousel-item>
                {if config('system.carousel.carousel1')}
                <div>
                    <a href="{:config('system.carousel.carousel1_url')}">
                        <img src="{:config('system.carousel.carousel1')}">
                    </a>
                </div>
                {/if}
                {if config('system.carousel.carousel2')}
                <div>
                    <a href="{:config('system.carousel.carousel2_url')}">
                        <img src="{:config('system.carousel.carousel2')}">
                    </a>
                </div>
                {/if}
                {if config('system.carousel.carousel3')}
                <div>
                    <a href="{:config('system.carousel.carousel3_url')}">
                        <img src="{:config('system.carousel.carousel3')}">
                    </a>
                </div>
                {/if}

            </div>
        </div>
        {/if}
        {/if}
        <p class="s-text">{$data.title}</p>
        <div>
            <ul class="art-list">
                {if count($data.list) == 0}
                <p class="no-data">暂无文章哈~</p>
                {/if}
                <!-- 包含图片 -->
                {volist name='data.list' id='vo' }
                {if $vo.img_path != ''}
                <li class="clearfix">
                    <div class="n-left">
                        <img src="{$vo.img_path}" alt="">
                    </div>
                    <div class="n-right">
                        <div>
                            <!-- <p class="title">{$vo.title}</p> -->
                            <p class="title">
                                {$vo.is_top == 1 ? '<span class="span is_top">置顶</span>' : ''}
                                {$vo.is_hot == 1 ? '<span class="span is_hot">加精</span>' : ''}
                                {$vo.type == 3 ? '<span class="span is_ques">提问</span>' : ''}
                                <a href="{:url('/index/article/index' , ['art_id' => $vo.id])}">{$vo.title}</a>
                            </p>
                        </div>
                        <div class="t-bottom">
                            {if $vo.category}
                            <p>
                                <span class="layui-badge-rim">{$vo.category}</span>
                            </p>
                            {/if}
                            <div class="art-info">
                                <i class="layui-icon-eye layui-icon">&nbsp;{$vo.heat}</i>
                                <i class="layui-icon-dialogue layui-icon">&nbsp;{$vo.commentCount}</i>
                                <i class="layui-icon-heart layui-icon">&nbsp;{$vo.collectCount}</i>
                            </div>
                        </div>
                        <div class="info">
                            <div>
                                <img src="{$vo.headIcon}" alt="" class="head-icon">
                                <span><a class="layui-font-blue"
                                        href="{:url('index/profile/index',['uid' => $vo.user_id])}">{$vo.nickname}</a></span>
                            </div>
                            <span class="create-time layui-font-gray layui-font-12">{$vo.create_time}</span>
                        </div>
                    </div>
                </li>
                {else/}
                <!-- 不包含图片 -->
                <!-- onclick="window.location.href='/index/article/index/id/{$vo.id}'" -->
                <li class="clearfix no-img">
                    <div>
                        <p class="title">
                            {$vo.is_top == 1 ? '<span class="span is_top">置顶</span>' : ''}
                            {$vo.is_hot == 1 ? '<span class="span is_hot">加精</span>' : ''}
                            {$vo.type == 3 ? '<span class="span is_ques">提问</span>' : ''}
                            <a href="{:url('/index/article/index' , ['art_id' => $vo.id])}">{$vo.title}</a>
                        </p>
                    </div>
                    <div class="t-bottom">
                        {if $vo.category}
                        <p>
                            <span class="layui-badge-rim">{$vo.category}</span>
                        </p>
                        {/if}
                        <div class="art-info">
                            <i class="layui-icon-eye layui-icon">&nbsp;{$vo.heat}</i>
                            <i class="layui-icon-dialogue layui-icon">&nbsp;{$vo.commentCount}</i>
                            <i class="layui-icon-heart layui-icon">&nbsp;{$vo.collectCount}</i>
                        </div>
                    </div>
                    <div class="info">
                        <div>
                            <img src="{$vo.headIcon}" alt="" class="head-icon">
                            <span><a class="layui-font-blue"
                                    href="{:url('index/profile/index',['uid' => $vo.user_id])}">{$vo.nickname}</a></span>
                        </div>
                        <span class="create-time layui-font-gray layui-font-12">{$vo.create_time}</span>
                    </div>
                </li>
                {/if}
                {/volist}
            </ul>
            <div class="pagination">
                {$page|raw}
            </div>
        </div>
        <div class="page clearfix">
        </div>
    </div>
    <div class="right-ctn">
        <div class="hot-art">
            <p class="s-text">热门文章</p>
            <ul class="hot-list">
                {if count($hotArticle) == 0}
                什么也没有
                {/if}
                {volist name="hotArticle" id="hot" key="k"}
                <li>
                    <a href="{:url('/index/article/index' ,['art_id' => $hot.id])}">
                        <p>
                            {if $k == 1}
                            <span class="layui-badge layui-bg-red">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {else /}
                            {if $k == 2}
                            <span class="layui-badge layui-bg-orange">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {else / }
                            <span class="layui-badge layui-bg-gray">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {/if}
                            {/if}
                            <span class="layui-font-14 layui-elip">{$hot.title}</span>&nbsp;&nbsp;
                            <i class="layui-icon-eye layui-icon layui-font-12 layui-font-gray">&nbsp;{$hot.heat}</i>
                        </p>
                    </a>
                </li>
                {/volist}
            </ul>
            <p class="s-text">最新文章</p>
            <ul class="new-list hot-list">
                {if count($newArt) == 0}
                什么也没有
                {/if}
                {volist name="newArt" id="new" key="k"}
                <li>
                    <a href="{:url('/index/article/index' ,['art_id' => $new.id])}">
                        <p>
                            {if $k == 1}
                            <span class="layui-badge layui-bg-red">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {else /}
                            {if $k == 2}
                            <span class="layui-badge layui-bg-orange">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {else / }
                            <span class="layui-badge layui-bg-gray">{$k}</span>&nbsp;&nbsp;&nbsp;
                            {/if}
                            {/if}
                            <span class="layui-font-14 layui-elip">{$new.title}</span>
                            <i class="layui-icon-eye layui-icon layui-font-12 layui-font-gray" style="display: inline-block;margin-left: 10px;">&nbsp;{$new.heat}</i>
                        </p>
                    </a>
                </li>
                {/volist}
            </ul>
            <p class="s-text">标签</p>
            <ul class="tag-list">
                {volist name="tapList" id="tap"}
                <li><a href="{:url('index/index/index',['tag' => $tap.id])}">{$tap.tap}</a></li>
                {/volist}
            </ul>
            {if $Request.session.user}
            <div class="sign layui-clear">
                <span class="layui-breadcrumb" lay-separator="|">
                    <a href="">签到</a>
                    <a href="javascript:" id="sign-intro"><span class="layui-font-blue">说明</span></a>
                    <a href="javascript:" id="sign-list-btn" class="layui-font-blue"><span
                            class="layui-font-blue">活跃榜</span></a>
                    <a href="">已连续签到<span class="layui-font-14 layui-font-orange">{$sign.signDay}</span>天</a>
                </span>
                <div class="btn-box">
                    <button class="layui-btn  layui-btn-sm {$sign.isSign != 1 ? 'layui-btn-blue' : 'layui-btn-primary'}"
                        id="sign">{$sign.isSign != 1 ? '立即签到' : '今日已签到'}</button>
                    今日签到可得<span class="layui-font-14 layui-font-orange"> {$sign.signScore} </span>积分
                </div>
            </div>
            {/if}
        </div>

    </div>
</div>

{include file='common/bottom'}
<!-- 签到说明 -->
<script type="text/html" id="sign-brief">
     <div class="layui-padding-4">
            <blockquote class="layui-elem-quote"><p>签到天数获得积分，规则如下：</p>
            </blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>连续签到天数</th>
                        <th>每天可获积分</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>&lt3</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>&lt7</td>
                        <td>15</td>
                    </tr>
                    <tr>
                        <td>&lt15</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>&gt15</td>
                        <td>30</td>
                    </tr>
                </tbody>
            </table>
            <ul class="layui-text">
                <li><span>中间若有间隔，则连续天数重新计算</span></li>
                <li><span class="layui-font-orange">不可利用程序进行签到，否则取消积分发放</span></li>
              </ul>
        </div>
</script>
<!-- 签到活跃榜 -->
<script type="text/html" id="sign-list">
    <div class="sign-active" id="sign-activ">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">最新签到</li>
                <li>今日最快</li>
                <li>总签到榜</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    {volist name="sign.newSignLis" id="newSign"}
                    <div class="list">
                        <img class="avator" src="{$newSign.userInfo.head_icon|default=''}" alt="">
                        <span><a class="layui-font-blue layui-font-14" href="{:url('/index/profile/index',['uid' => $newSign.userInfo.id])}">{$newSign.userInfo.username}</a></span>
                        <span  class="layui-font-gray layui-font-14">签到于 {php}echo date('H:i:s' , $newSign['sign_time']){/php}</span>
                    </div>
                    {/volist}
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        {volist name="sign.todayFastLis" id="newSign"}
                        <div class="list">
                            <img class="avator" src="{$newSign.userInfo.head_icon|default=''}" alt="">
                            <span><a class="layui-font-blue layui-font-14" href="{:url('/index/profile/index',['uid' => $newSign.userInfo.id])}">{$newSign.userInfo.username}</a></span>
                            <span  class="layui-font-gray layui-font-14">签到于 {php}echo date('H:i:s' , $newSign['sign_time']){/php}</span>
                        </div>
                        {/volist}
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        {volist name="sign.totalLis" id="newSign"}
                            <div class="list">
                                <img class="avator" src="{$newSign.userInfo.head_icon|default=''}" alt="">
                                <span><a class="layui-font-blue layui-font-14" href="{:url('/index/profile/index',['uid' => $newSign.userInfo.id])}">{$newSign.userInfo.username}</a></span>
                                连续签到<span  class="layui-font-orange layui-font-14"> {$newSign.day} </span>天
                            </div>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(function () {
        const layer = layui.layer
        const $ = layui.$
        var util = layui.util;
        var carousel = layui.carousel;
        let carouselHei = window.innerWidth < 700 ? '240px' : '360px'
        carousel.render({
            elem: '#ID-carousel-demo-image',
            width: '100%',
            height: carouselHei,
            interval: 3000
        });
        util.fixbar({
            // bars: [ {
            //     type: 'help',
            //     icon: 'layui-icon-help',
            // }, ],
            bgcolor: '#393D52', // bar 的默认背景色
            css: { right: 50, bottom: 50 },
            duration: 300, // top bar 等动画时长（毫秒）
            on: { // 任意事件 --  v2.8.0 新增
                mouseenter: function (type) {
                    layer.tips(type, this, {
                        tips: 4,
                        fixed: true
                    });
                },
                mouseleave: function (type) {
                    layer.closeAll('tips');
                }
            },
            click: function (type) {
                // console.log(this, type);
            }
        });
        // 签到说明
        $('#sign-intro').click(() => {
            layer.open({
                type: 1, // page 层类型
                area: ['300px', '500px'],
                title: '签到说明',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: $('#sign-brief').html()
            })
        })
        $('#sign-list-btn').click(() => {
            layer.open({
                type: 1, // page 层类型
                area: ['300px', '500px'],
                title: '活跃榜',
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: $('#sign-list').html()
            })
        })
        $('#sign').click(function () {
            $.get('/index/index/sign', (res) => {
                if (res.code == 200) {
                    layer.msg('签到成功')
                    $(this).removeClass('layui-bg-blue')
                    $(this).addClass('layui-bg-primary')
                    $(this)[0].innerHTML = '今日已签到'
                } else {
                    layer.msg('签到失败：' + res.message)
                }
            }, 'json')
        })
    })

</script>